<template>
  <div class="music">
    <audio ref="musics" id="music" src="https://minsuguan.oss-cn-hangzhou.aliyuncs.com/icon/95K888piCWv5.mp3" preload="auto" loop
           autoplay></audio>
  </div>
  <transition name="fade" mode="in-out">
    <RouterView v-slot="{ Component }" @click.once="clm">
      <component :is="Component"></component>
    </RouterView>
  </transition>
</template>
<script setup>
import {RouterLink, RouterView} from 'vue-router'
import {useCounterStore} from '@/stores/counter'
import {onMounted, ref, watch, provide} from "vue";

const counter = useCounterStore()
const musics = ref(null)
onMounted(() => {
  console.log(musics, 2)
  musics.value?.play()
  provide('musics', musics);
  console.log(counter.musicIsPlay, 222)
})
const clm = () => {
  console.log('音乐开始')
  // musics.value?.play()
  counter.play()
}
const isPlays = counter.musicIsPlay
watch(() => counter.musicIsPlay, (newValue) => {
  if (newValue) {
    musics.value?.play()
    console.log(11)
  } else {
    musics.value?.pause()
    console.log(22)
  }
})
</script>
<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

p {
  margin: 0;
  padding: 0;
}
</style>
